const instance = axios.create({
  baseURL: 'http://cba.itlike.com/public/index.php?s=/api/',
  method: 'get'
})
var swiper = new Swiper('.mySwiper', {
  loop: true,
  autoplay: {
    delay: 2000
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  }
})
const shop = document.querySelector('.shop')
const h = document.querySelector('.shop h3')
const ser = document.querySelector('.ser')
const ls = document.querySelectorAll('.swiper-slide img')
function getindex() {
  instance({
    url: '/page/detail'
  }).then(
    ({
      data: {
        data: { pageData: pd }
      }
    }) => {
      let { page, items } = pd
      shop.style.backgroundColor = page.style.titleBackgroundColor
      h.innerHTML = page.params.title
      ser.innerHTML = items[0].params.placeholder
      items.forEach(item => {
        if (item.type == 'banner') {
          for (let i = 0; i < ls.length; i++) {
            ls[i].src = item.data[i].imgUrl
          }
        }
      })
      notice(items)
      menu(items)
      love(items)
      guess(items)
      content(items)
    }
  )
}
getindex()
const p = document.querySelector('.mes div span')
const mes = document.querySelector('.mes')
function notice(items) {
  let txt = items.find(item => item.type == 'notice')
  p.innerHTML = txt.params.text
  p.style.color = txt.style.textColor
  mes.style.backgroundColor = txt.style.background
}
const mn = document.querySelector('.men')
const im = document.querySelector('.men img')
function menu(items) {
  // let str = ''
  let item = items.find(item => item.type == 'navBar')
  // item.data.forEach(el => {
  //   str += `
  //           <div class='it'>
  //               <div><img src=${el.imgUrl} alt=""></div>
  //               <p>${el.text}</p>
  //           </div>
  //       `
  // })
  // mn.innerHTML = str
  const tet = document.querySelectorAll('.men p')
  tet.forEach(ele => {
    ele.style.color = item.style.textColor
    mn.style.backgroundColor = item.style.background
  })
}
const imgA = document.querySelector('.img')
const img = document.querySelector('.img img')
function love(item) {
  let el = item.find(ele => {
    return ele.type == 'image'
  })
  imgA.style.backgroundColor = el.style.background
  img.src = el.data[0].imgUrl
}
const ge = document.querySelector('.gue')
function guess(item) {
  let gue = item.find(el => el.type == 'richText')
  ge.innerHTML = gue.params.content
  ge.style.backgroundColor = gue.style.background
}
const contentAll = document.querySelector('.contentAll')
function content(item) {
  let str = ''
  let list = item.find(it => it.type == 'goods')
  list.data.forEach(item => {
    str += `
        <div class="content" data-index =${item.goods_id}>
        <img src=${item.goods_image} alt="">
        <div class="tx">
            <p class="txone">${item.goods_name}</p>
            <p class="txtwo">已售${item.goods_sales}件</p>
            <p class="txthree">￥${item.goods_price_max}
            <span>￥${item.line_price_max}</span>
            </p>
        </div>
      </div>
        `
  })
  contentAll.innerHTML = str

  let son = document.querySelectorAll('.content')
  console.log(son)

  // const res = await axios.get('/goods/detail')
  // console.log(res)
  son.forEach(element => {
    element.addEventListener('click', function () {
      localStorage.setItem('data', JSON.stringify(this.dataset.index))
      location.href = './page/detail.html'
    })
  })
}
